<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<script src="../js/vue.js"></script>
<div id="app">
  {{message}}
  <cpn1></cpn1>
</div>




<!--第二种模板分离的写法-->
<template id="cpn2">
  <div>
    <h2>{{title}}</h2>
    <p>我是内容，哈哈哈哈哈2</p>
    <p>我是内容，呵呵呵2</p>
  </div>
</template>

<script>

  Vue.component('cpn1', {
    template: `#cpn2`,
    //组件中的数据存放用data方法表示,返回一个对象
    data(){
      return{
        title:'hello,world'
      }
    }
  })
  const app = new Vue({
    el: '#app',
    data: {
      message: "第一次，系统的学VUE"
    }
  })
</script>
</body>
</html>